<template>
  <view class="station-list">
    <!-- 导航栏 -->
    <view :style="navigationBarStyle" class="input-wrap">
      <view class="input-box" :style="inputWidth" @tap="tapInput">
        请输入电站名称/目的地进行搜索
      </view>
    </view>
    <!-- 筛选栏 -->
    <view class="choose-wrap">
      <!-- <view class="item" @tap="tapChoose(1)">
        <text>{{ getChooseTitle(1) }}</text>
        <view class="icon-wrap">
          <view class="icon iconfont icon-arrow" :class="{ 'icon-down': getShow(1) }"></view>
        </view>
      </view> -->
      <view class="item" @tap="tapChoose(2)">
        <text>{{ getChooseTitle(2) }}</text>
        <view class="icon-wrap">
          <view class="icon iconfont icon-arrow" :class="{ 'icon-down': getShow(2) }"></view>
        </view>
      </view>
      <view class="item" @tap="tapChoose(3)">
        <text>{{ getChooseTitle(3) }}</text>
        <view class="icon-wrap">
          <view class="icon iconfont icon-arrow" :class="{ 'icon-down': getShow(3) }"></view>
          <view class="icon-wrap"></view>
        </view>
      </view>
    </view>
    <QcscrollUni
      ref="mescrollRef"
      :getData="getData"
      :top="topScroll"
      :bottom="bottomScroll"
      :height="heightScroll">
      <view
        class="list-wrap"
        v-for="(item, index) in stationObj.list"
        :key="index"
        @tap="tapDetails(item)">
        <StationItem
          @locationOpenBtm="locationOpenBtm"
          :item="item"
          styleBox="list-item"
          page="/pages/stationList/stationList"></StationItem>
      </view>
    </QcscrollUni>

    <Tabber ref="tabber" :select="2"></Tabber>
    <!-- 筛选弹框 -->
    <!-- <ChooseView ref="orgView" @get-data="getData"></ChooseView> -->
    <ChooseView
      ref="rangeView"
      selectId="50"
      :selectItem="optionArr.range[4]"
      @get-data="updateList"></ChooseView>
    <ChooseView ref="typeView" @get-data="updateList"></ChooseView>
    <PopupBtm ref="locationOpenRef" @set-item="chooseType" />
  </view>
</template>

<script lang="ts" setup>
import { systemInfo, getNavigationBarStyle1, getwv, setToastInstance } from '@mixins/info';
import Tabber from '@/components/tabber/tabber.vue';
import ChooseView from './chooseView.vue';
import StationItem from './stationItem.vue';
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import { queryStationList } from '@/service/apis/station';
import { getLocationInfo, openLocation } from '@/utils/location';
import PopupBtm from '@/components/popupBtm/popupBtm.vue';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

// 样式
let navigationBarStyle = getNavigationBarStyle1();
let sh: number = systemInfo.windowHeight;

let menuWidth = systemInfo.menuWidth;
// const inputWidth = `width: calc(100vw - ${menuWidth}px - 60rpx - 68rpx - 48rpx)`;
let inputWidth = `width: calc(100vw - ${menuWidth}px - 68rpx - 48rpx)`;

//搜索筛选
// const orgView = ref();
const rangeView = ref();
const typeView = ref();
const info = getLocationInfo();
const chooseData = reactive({
  userLng: info.lng,
  userLat: info.lat,
  stationName: '', // 搜索值
  operatorId: '', // 运营商
  scope: '', // 范围
  equipmentType: '', // 终端类型
});
const locationOpenRef = ref();
const locationOpenItem = ref({} as any);

const optionArr = reactive({
  //运营商选择项
  // org: [] as any,
  // 范围选择项
  range: [
    {
      id: '5',
      name: '5km内',
    },
    {
      id: '10',
      name: '10km内',
    },
    {
      id: '20',
      name: '20km内',
    },
    {
      id: '30',
      name: '30km内',
    },
    {
      id: '50',
      name: '50km内',
    },
    {
      id: '100',
      name: '100km内',
    },
  ],
  // 筛选点击事件
  type: [
    {
      id: '1',
      name: '直流',
    },
    {
      id: '2',
      name: '交流',
    },
  ],
});
// 筛选点击事件
const tapChoose = (type: number) => {
  switch (type) {
    // case 1:
    //   if (!orgView.value.getShow()) {
    //     orgView.value.show(optionArr.org);
    //   } else {
    //     orgView.value.hide();
    //   }
    //   rangeView.value.hide();
    //   typeView.value.hide();
    //   break;
    case 2:
      // orgView.value.hide();
      if (!rangeView.value.getShow()) {
        rangeView.value.show(optionArr.range);
      } else {
        rangeView.value.hide();
      }
      typeView.value.hide();
      break;
    case 3:
      // orgView.value.hide();
      rangeView.value.hide();
      if (!typeView.value.getShow()) {
        typeView.value.show(optionArr.type);
      } else {
        typeView.value.hide();
      }
      break;
  }
};
// 筛选显示标题
const getChooseTitle = (type: number) => {
  // if (type === 1) {
  //   const name = orgView?.value?.getSelect()?.name;
  //   return name && name !== 'Object' ? name : '运营商';
  // } else
  if (type === 2) {
    const name = rangeView?.value?.getSelect()?.name;
    return name && name !== 'Object' ? name : '范围';
  } else if (type === 3) {
    const name = typeView?.value?.getSelect()?.name;
    return name && name !== 'Object' ? name : '终端类型';
  }
};
// 是否显示筛选弹框
const getShow = (type: number) => {
  // if (type === 1) {
  // return orgView?.value?.getShow();
  // } else
  if (type === 2) {
    return rangeView?.value?.getShow();
  } else if (type === 3) {
    return typeView?.value?.getShow();
  }
};

// 打开地图弹窗
const locationOpenBtm = (item: any) => {
  locationOpenItem.value = item;
  locationOpenRef.value.open([
    {
      name: '高德地图',
      type: 'gd',
    },
    {
      name: '百度地图',
      type: 'bd',
    },
  ]);
};

// 底部弹窗选择地图
const chooseType = (type: string) => {
  openLocation({ ...locationOpenItem.value, type });
};

// 电站列表
const tabber = ref();
// const stationHeight = `height: ${systemInfo.windowHeight - 64 - 41}px;`;
// const rootStyle = 'padding-top: 16rpx; background-color: #e6e6e6;';
const topScroll = ref(`${systemInfo.navHeight * 2 + 80}rpx`);

const bottomScroll = '154rpx';
const heightScroll = ref(`${systemInfo.screenHeight - systemInfo.navHeight - getwv(37 + 77)}px`);

let stationObj = reactive({
  list: [] as Array<any>,
});
const mescrollRef = ref();
// 上拉加载的回调
const getData = (
  extraParams: { pageNum: number; pageSize: number } = { pageNum: 1, pageSize: 10 }
) => {
  if (!chooseData.userLat || !chooseData.userLng) {
    const info = getLocationInfo();
    chooseData.userLat = info.lat;
    chooseData.userLng = info.lng;
  }
  // chooseData.operatorId = orgView.value?.getSelectId();
  chooseData.operatorId = '';
  chooseData.scope = rangeView.value?.getSelectId();
  chooseData.equipmentType = typeView.value?.getSelectId();
  return new Promise(resolve => {
    queryStationList(chooseData, extraParams)
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          stationObj.list = res.dataList;
          mescrollRef.value?.setList(stationObj.list, res.totalCount, extraParams);
        } else {
          stationObj.list = [...stationObj.list, ...res.dataList];
        }
        resolve({ list: stationObj.list, total: res.totalCount });
      })
      .catch(() => {
        if (stationObj.list?.length === 0) {
          resolve({ list: [], total: 0 });
        }
      });
  });
};

// 点击事件-跳转电站详情
const tapDetails = (item: any) => {
  uni.navigateTo({
    url: `/pages/stationDetails/stationDetails?id=${item.id}`,
  });
};

// const getOrg = () => {
//   queryChannelOperator({}).then((res: any) => {
//     optionArr.org = res;
//   });
// };

// onLoad(() => {
//   getOrg();
// });
let reData = ref('');
const refreshSystemInfo = () => {
  navigationBarStyle = getNavigationBarStyle1();
  topScroll.value = `${systemInfo.navHeight * 2 + 80}rpx`;
  heightScroll.value = `${systemInfo.screenHeight - systemInfo.navHeight - getwv(37 + 77)}px`;
};
watch(systemInfo, val => {
  refreshSystemInfo();
});
onShow(() => {
  uni.$off('returnData');
  uni.$once('returnData', data => {
    reData.value = data;
    uni.$off('collect');
    uni.$once('collect', collect => {
      const obj = stationObj.list.find((item: any) => collect.id == item.id);
      if (obj) {
        obj.collectStatus = collect.status;
      }
    });
  });
  if (!reData.value) {
    const info = getLocationInfo();
    chooseData.userLat = info.lat;
    chooseData.userLng = info.lng;
    mescrollRef.value?.resetUpScroll();
  } else {
    reData.value = '';
  }
});
onUnload(() => {
  uni.$off('returnData');
  uni.$off('collect');
});

const tapInput = () => {
  uni.navigateTo({
    url: `/pagesMain/stationSearch/stationSearch`,
  });
};

const updateList = () => {
  mescrollRef.value?.resetUpScroll();
};
</script>

<style lang="scss" scoped>
.station-list {
  width: 100vw;
  overflow-x: hidden;
}

.input-wrap {
  display: flex;
  align-items: center;
  margin-left: 12px;

  .input-box {
    display: flex;
    align-items: center;
    width: 220px;
    height: 32px;
    padding: 0 17px;
    border: 1px solid #f2f2f2;
    border-radius: 19px;
    font-size: 12px;
    color: #545454;
  }

  .iconfont-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 5px;

    .icon-recommend {
      font-size: 13px;
      color: #000;
    }

    .text {
      line-height: 18px;
      font-size: 10px;
      color: #000;
    }
  }
}

.choose-wrap {
  display: flex;
  align-items: center;
  height: 37px;
  margin-top: 3px;
  font-size: 14px;
  color: #545454;
  text-align: center;

  .item {
    display: flex;
    justify-content: center;
    flex: 1;

    text {
      display: inline-block;
      white-space: nowrap;
      max-width: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .icon-wrap {
    position: relative;
  }

  .icon {
    position: absolute;
    font-size: 6px;
    color: #858585;
    top: 6px;
    left: 5px;
  }

  .icon-down {
    transform: rotate(180deg);
  }
}
</style>